<script setup lang="ts">
import { ref, onMounted } from "vue";
import { FiltrationFun } from "@/utils";
const props = defineProps<{
  title: string;
  sizeVal?: number;
  actType: number;
  textcolor?: string;
  titleColor?: string;
  demergerColor?: string;
}>();
onMounted(() => {
  if (props.actType) {
    getconfigDesc();
  }
});
// 描述
const texts = ref([] as any);
const getconfigDesc = () => {
  FiltrationFun.getconfigDesc(props.actType).then(res => {
    texts.value = res;
  });
};
</script>
<template>
  <!-- 活动说明 -->
  <div class="actInfo-frame">
    <div class="divider-frame df ai-center jc-center">
      <div
        class="divider-div"
        :style="{
          backgroundImage: props.demergerColor
            ? props.demergerColor
            : 'linear-gradient(90deg,#ffffff00 0%,#ffffffa6 100%)',
        }"
      ></div>
      <div
        class="divider-name"
        :class="{ fontsize20: props.sizeVal == 1, fontsize28: props.sizeVal == 2 }"
        :style="{ color: props.titleColor ? props.titleColor : '#ffffffd9' }"
      >
        {{ props.title }}
      </div>
      <div
        class="divider-div divider-div-rigth"
        :style="{
          backgroundImage: props.demergerColor
            ? props.demergerColor
            : 'linear-gradient(90deg,#ffffff00 0%,#ffffffa6 100%)',
        }"
      ></div>
    </div>
    <div class="eventDescription-frame">
      <div
        v-for="(items, index) in texts"
        :key="index"
        class="textWrap"
        :style="{ color: props.textcolor ? props.textcolor : 'rgba(255, 255, 255, 0.45)' }"
      >
        {{ index + 1 }}. {{ `${items?.actDescContent}` }}
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.actInfo-frame {
  width: 100%;
  height: auto;
}

.divider-frame {
  width: 100%;
  height: auto;
  margin-top: 28px;

  .divider-div {
    width: 150px;
    height: 4px;
    background-image: linear-gradient(90deg, #ffffff00 0%, #ffffffa6 100%);
  }

  .divider-div-rigth {
    transform: scaleX(-1);
  }

  .divider-name {
    color: #ffffffd9;
    font-size: 24px;
    margin-left: 13px;
    margin-right: 13px;
  }

  .fontsize20 {
    font-size: 20px;
  }
  .fontsize28 {
    font-size: 28px;
  }
}

.eventDescription-frame {
  width: 100%;
  height: auto;
  font-size: 26px;
  margin-top: 31px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 35px;
  margin-bottom: 40px;
}
.textWrap {
  margin: 0 20px 0;
  word-wrap: break-word;
  margin-bottom: 30px;
}
</style>
